<template>
  <div>
    <!-- <van-tabs line-width="5px" line-height="5px" title-active-color="red"  animated sticky>
      <van-tab v-for="index in data" :title="index" :key="index" element.style="bold">
        <classi-fied></classi-fied>
        <tabuated></tabuated>
      </van-tab>
    </van-tabs> -->
    <van-tabs line-width="5px" line-height="5px" title-active-color="red" v-model="tab"  animated sticky>
      <van-tab v-for="index in data" :title="index" :key="index" element.style="bold" :name="index">
        <classi-fied></classi-fied>
        <tabuated></tabuated>
      </van-tab>
    </van-tabs>

  </div>
</template>

<script>
import classiFied from './classified.vue';
import tabuated from './tabulated.vue';
export default {
  components: {
    classiFied,
    tabuated
  },
    data() {
        return{
            data: ["全部", "音乐会", "话剧", "演唱会", "美术展览", "相声", "曲艺杂谈", "体育赛事", "舞台剧"],
            activeName:"",
            tab:"音乐会"
        }  
    },
    created() {
      this.activeName= this.$store.state.activeName;
      this.tab = this.activeName;
    },
    computed: {
      actived() {
        this.activeName= this.$store.state.activeName;
        this.tab = this.activeName;
      }
    },
    beforeDestroy() {
      this.$store.commit('setActiveName', "全部");
    }
};
</script>

<style lang="scss" scoped>
:deep(.van-tab__text){
  font-weight: 500
}
:deep(.element.style){
  font-weight: bold;
    color: rgb(255, 98, 98);
}
</style>